<template>
  <div>
    <el-form ref="ruleForm" :model="ruleForm">
      <div class="l-addrygl">
        <!-- <h2>基本信息</h2> -->
        <!-- 返回 -->
        <div class="l-addrygl-1">
          <div></div>
          <div class="l-addrygl-back" @click="back()">返回</div>
          <div class="head-span">新增人员</div>
        </div>
        <!-- 单位信息 -->

        <div class="l-addrygl-2">
          <div class="l-addrygl-2-1">单位信息</div>

          <!-- input框 -->
          <div class="l-addrygl-2-2">
            <!-- 第一行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item>
                  <div>举办单位</div>
                  <el-select v-model="ruleForm.company_id" placeholder="请选择">
                    <el-option
                      v-for="item in linput1"
                      :key="item.company_id"
                      :label="item.company_name"
                      :value="item.company_id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="6">
                <el-form-item>
                  <div>培训等级ID</div>
                  <el-select v-model="ruleForm.level_id" placeholder="请选择">
                    <el-option
                      v-for="item in linput3"
                      :key="item.level_id"
                      :label="item.level_name"
                      :value="item.level_id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col> -->
              <el-col :span="6">
                <el-form-item>
                  <div>演练/培训种类</div>
                  <el-select v-model="ruleForm.type_id" placeholder="请选择">
                    <el-option
                      v-for="item in linput2"
                      :key="item.type_id"
                      :label="item.type_name"
                      :value="item.type_id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item>
                  <span>开始时间</span>
                  <div>
                    <el-date-picker
                      format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy-MM-dd"
                      v-model="ruleForm.train_start"
                      type="date"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第二行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item>
                  <span>结束时间</span>
                  <div>
                    <el-date-picker
                      format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy-MM-dd"
                      v-model="ruleForm.train_end"
                      type="date"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="培训标题">
                  <el-input v-model="ruleForm.train_title" class="padding"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!--textarea  -->
            <div class="textarea1">
              <el-col class="textarea1" :span="20">
                <el-form-item label="演练/培训内容">
                  <el-input
                    type="textarea"
                    class="padding"
                    :autosize="{ minRows: 3, maxRows: 8 }"
                    placeholder="演练/培训内容"
                    v-model="ruleForm.train_text"
                  ></el-input>
                </el-form-item>
              </el-col>
            </div>
            <!--textarea  -->
            <div class="textarea1">
              <el-col :span="20">
                <el-form-item label="备注" prop="people_age">
                  <el-input
                  class="padding"
                    type="textarea"
                    :autosize="{ minRows: 3, maxRows: 8 }"
                    placeholder="备注"
                    v-model="ruleForm.train_remark"
                  ></el-input>
                </el-form-item>
              </el-col>
            </div>
            <!-- <el-row>
              <el-col :span="6">
                <el-form-item prop="DanWeiName">
                  <div>附件</div>
                 
                   <el-upload
            action="api/pic/load"
            :headers="userToken"
            :on-success="handleSuccess"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :show-file-list="false"
          >
            <el-button type="primary" class="clicksub" size="medium">
              上传
              <i class="el-icon-upload el-icon--right"></i>
            </el-button>
          </el-upload>
                </el-form-item>
              </el-col>
            </el-row> -->
            <!-- 表格1 -->
            <!-- <div class="l-chuan-table">
              <el-table
                ref="singleTable"
                :data="tableData"
                highlight-current-row
                @current-change="handleCurrentChange"
                :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
                style="width: 100%"
              >
                <el-table-column align="center" type="index" width="50">
                </el-table-column>
                <el-table-column
                  align="center"
                  property="date"
                  label="文件名"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  property="name"
                  label="文件大小"
                  width="120"
                >
                </el-table-column>
                <el-table-column property="do" label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button type="text" @click="del(scope.$index, scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div> -->
          </div>
        </div>
        <!-- 培训人员 -->
        <div class="l-addrygl-3">
          <div class="l-addrygl-3-1">
            <div class="l-addrygl-3-1-left">培训人员</div>
            <div class="l-addrygl-3-1-right" @click="GZadd()">添加</div>
          </div>
          <!-- 培训人员表格 -->
          <div class="l-addp-gz-table">
            <el-table
              ref="singleTable"
              :data="currList"
              highlight-current-row
              @current-change="handleCurrentChange"
              :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
              style="width: 100%"
            >
              <el-table-column
                align="center"
                type="index"
                width="50"
              ></el-table-column>
              <el-table-column
                align="center"
                property="buildCompany.company_name"
                label="单位"
                width="120"
              ></el-table-column>
              <el-table-column
                align="center"
                property="people_name"
                label="姓名"
                width="120"
              ></el-table-column>
              <el-table-column
                align="center"
                property="people_cardid"
                label="身份证号码"
              ></el-table-column>
              <el-table-column
                align="center"
                property="buildJob.job_name"
                label="人员类型"
              ></el-table-column>
              <el-table-column
                align="center"
                property="address"
                label="成绩"
              ></el-table-column>
              <el-table-column
                align="center"
                property="address"
                label="是否合格"
              ></el-table-column>
              <el-table-column property="do" label="操作" align="center">
                <template slot-scope="scope">
                  <el-button type="text" @click="del(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="l-fen">
            <div class="f-fenye">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="tableData.length"
                :page-size="pageSize"
                @current-change="changePage"
              ></el-pagination>
            </div>
          </div>
        </div>

        <!-- 模态框 -->
        <el-dialog title="选择人员" :visible.sync="dialogFormVisible">
          <div class="dialog">
            <div class="dialog-left">
              <!-- <div class="dialog-left-input">
                <el-input v-model="input" placeholder="请输入内容"></el-input>
              </div> -->
              <el-table
                ref="multipleTable"
                :data="tableData1"
                tooltip-effect="dcurrList1ark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"></el-table-column>
                <!-- <el-table-column label="日期" width="120">
                  <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column> -->
                <el-table-column
                  prop="people_name"
                  label="姓名"
                  width="120"
                ></el-table-column>
                <!-- <el-table-column prop="people_tele" label="电话" show-overflow-tooltip></el-table-column> -->
              </el-table>
              <!-- 分页 -->
             
            </div>
            <div class="dialog-right">
              <div>已选人员 {{ this.multipleSelection.length }}</div>
              <el-table
                ref="multipleTable"
                :data="multipleSelection"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <!-- <el-table-column type="selection" width="55"></el-table-column> -->
                <!-- <el-table-column label="日期" width="120">
                  <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column> -->
                <el-table-column
                  prop="people_name"
                  label="姓名"
                  width="120"
                ></el-table-column>
                <el-table-column
                  prop="buildCompany.company_name"
                  label="公司"
                  show-overflow-tooltip
                ></el-table-column>
              </el-table>
                 <!-- <div class="f-fenye1">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="multipleSelection.length"
                :page-size="pageSize"
                @current-change="changePage1"
              ></el-pagination>
            </div>  -->
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="motaikuang()">确 定</el-button>
          </div>
        </el-dialog>
        <div class="l-addrygl-5">
          <div class="l-tijiao">
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >提交</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import http from "../api";
import axios from "axios";
export default {
  data() {
    // var validateusername = (rule, value, callback) => {
    //   var reg = /^[a-zA-Z]\w{3,7}/;
    //   if (!reg.test(value)) {
    //     callback(new Error("请输入用户名"));
    //   } else {
    //     callback();
    //   }
    // };

    return {
      currPage: 1, //当前页
      currList: [], //当前展示的数据数组
       currList1: [], //当前展示的数据数组
      pageSize: 2,
        userToken: {},
       pageSize1:6,
       linput1: "", //举办单位
      linput2: "", //培训种类
      linput3: "", //培训等级ID
      input: "",
      tableData: [],
      tableData1: [],
     multipleSelection: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      // form: {}, //模态框input value值
      peopleIds: [], //表格id数组
      formLabelWidth: "120px",
      options1: [
        {
          value: 0,
          label: "待入场",
        },
        {
          value: 1,
          label: "入场",
        },
        {
          value: 2,
          label: "离场",
        },
      ],
      currentRow: null,
      ruleForm: {
        company_id: "", //举办单位
        level_id: "", //培训等级ID
        type_id: "", //培训种类ID
        train_start: "", //开始时间
        train_end: "", //  结束时间
        train_title: "", //培训标题
        train_text: "", // 培训内容
        train_remark: "", //备注
             },
   
      // 表单验证规则
      // rules: {
      //   people_id: [{ required: true, message: "请输入工号", trigger: "blur" }],
      //   people_name: [{ required: true, message: "请输入姓名", trigger: "blur"}],
      //   job_id:[{ required: true, message: "请选择管理人员职务类型", trigger: "change"}],
      //   company_id:[{ required: true, message: "请输入单位名称", trigger: "blur"}],
      //   people_tele:[{ required: true, message: "请输入联系电话", trigger: "blur"}],
      //    people_addr:[{ required: true, message: "请输入户籍地址", trigger: "blur"}],
      //   people_status:[{ required: true, message: "请选择人员状态", trigger: "change"}],
      //    people_age:[{ required: true, message: "请输入年龄", trigger: "blur"}],
      //    people_member:[{ required: true, message: "请选择是否为党员", trigger: "change"}],
      //    people_cardstart:[{ required: true, message: "请选择是否为党员", trigger: "change"}],
      //    people_cardend:[{ required: true, message: "请选择日期", trigger: "change"}],
      //      people_nation:[{ required: true, message: "请输入民族", trigger: "change"}],
      //      people_sex:[{ required: true, message: "请选择性别", trigger: "change"}],
      //      people_give:[{ required: true, message: "请选择设备", trigger: "change"}],
      //     people_cardid:[{ required: true, message: "请输入身份证号码", trigger: "change"}],
      //   people_started:[{ required: true, message: "请输入入场时间", trigger: "change"}],

      //   //  DanWeiName: [{ validator: validateDanWeiName, trigger: 'blur' }],
      //   // username: [{ validator: validateusername, trigger: "blur" }],
      //   // idcard: [{ validator: validateidcard, trigger: 'blur' }],
      //   // gonghao: [{ validator: validategonghao, trigger: 'blur' }],
      // },
    };
  },
  methods: {
    // 上传
     handleSuccess(res, file, fileList) {
      console.log("文件", res);
      // this.chuan = res;
      // this.form.file_url = res.name;
      // this.$notify.success({
      //   title: "成功",
      //   message: `文件上传成功`,
      // });
    },
     handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    // 改变当前页改变当前页展示
    setCurrList(index) {
      this.currList = this.tableData.slice(
        (index - 1) * this.pageSize,
        index * this.pageSize
      );
    },
    // 改变当前页
    changePage(val) {
      this.currPage = val;
      this.setCurrList(val);
      console.log(val);
    },

   // 
    // setCurrList1(index) {
    //   this.currList1 = this.multipleSelection.slice(
    //     (index - 1) * this.pageSize1,
    //     index * this.pageSize1
    //   );
    // },
    // // 改变当前页
    // changePage1(val) {
    //   this.currPage = val;
    //   this.setCurrList1(val);
    //  console.log(val);
    // },
    handleSelectionChange(val) {
      this.multipleSelection = val;
        // this.setCurrList1(1);
      console.log('this.multipleSelection',this.multipleSelection);
    },
    // 工作经历的删除
    del() {},
    motaikuang(form) {
      this.dialogFormVisible = false;
      this.tableData = this.multipleSelection;
        this.setCurrList(1);
      console.log("tableData", this.tableData);
      // console.log("form表单", this.form);
    },
    // 模态框出现
    GZadd() {
      this.dialogFormVisible = true;
    },
    // 表格
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    // 返回
    back() {
      this.$router.push({
        name: "培训管理",
      });
    },
    // 提交
    //
    submitForm(ruleForm) {
      console.log("参数this.tableData", this.tableData);
      // peopleid数组
      let peopleIds = this.tableData.map((item, index, arr) => {
        return item.people_id;
      });
      console.log(peopleIds);
      this.ruleForm.peopleIds = peopleIds;
      console.log("参数this.ruleForm", this.ruleForm);

      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          http.ryglpeitableadd(this.ruleForm).then((res) => {
            console.log("培训管理新增", res);
             this.setCurrList(1);
          });
          // http.userAdd(this.ruleForm).then((res) => {
          //   console.log("新增", res);
          // });
          alert("成功");
          this.$router.push({
            name: "培训管理",
          });
        } else {
          // alert("注册失败");
          return false;
        }
      });
    },
  },
  mounted() {
     this.userToken.userToken = sessionStorage.getItem("userToken");
    http.ryglpeiinput1({}).then((res) => {
      this.linput1 = res.data; // 培训种类
      console.log("add举办单位", res.data);
    });
    http.ryglpeiinput2({}).then((res) => {
      this.linput2 = res.data; // 培训种类
      console.log("add培训种类", res.data);
    });
    http.ryglpeiinput3({}).then((res) => {
      this.linput3 = res.data; // 培训种类
      console.log("add培训等级", res.data);
    });
    //人员管理培训培训人员里模态框左边表格
    http.ryglpeidiologleft({}).then((res) => {
      this.tableData1 = res.data; // 模态框左边表格
//  this.setCurrList1(1);
      console.log("模态框左边表格", res.data);
    });
  },
};
</script>
<style scoped>
.padding >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px !important;
}
.el-select >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px;
  /* margin-left: 5px; */
}
/* 模态框大小 */
.dialog {
  width: 100%;
  height: 400px;
  background: white;
  display: flex;
}
.dialog-left {
  width: 35%;
  height: 400px;
   overflow-y: scroll;
  /* scroll-y: scroll; */
}
.dialog-right {
  width: 80%;
  height: 400px;
  overflow-y: scroll;
  /* position: relative; */
}
.el-button {
  height: 30px;
  padding: 7px 15px;
}
.textarea1 {
  height: 110px;
}
.el-input >>> .el-input__inner {
  width: 239px !important;
  height: 30px;
}
.el-select >>> .el-input__inner {
  width: 239px !important;
  height: 30px;
}
.el-form {
  /* margin-left: 20px; */
}
.el-row {
  /* width: 650px;  */
  /* height: 80px;  */
  /* margin-top: -2px;  */
  /* margin-top: 10px; */
  /* background: blanchedalmond; */
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 239px;
}
.el-col {
  /* width: 1150px; */
  height: 80px;

  /* border: 1px solid gray; */
}

.input-span {
  margin-right: 5px;
}
.add-input {
  width: 300px;
  margin-top: 15px;
  display: inline-block;
  margin-left: 10px;
}
.l-addrygl {
  margin-top: 20px;
  margin-left: 20px;
  /* width: 1200px; */
  height: 640px;
  background: #f1f1f1;
  overflow-y: scroll;
}
.l-addrygl-1 {
  /* position: fixed;
  top: 0; */
  font-size: 17px;
  color: #787878;
  width: 100%;
  height: 61px;
  background: white;
  display: flex;
  /* position: relative;  */
  justify-content: left;
  align-items: center;
}
.l-addrygl-back {
  cursor: pointer;
  margin-left: 10px;
}
.head-span {
  font-size: 17px;
  color: #222;
  font-weight: 700;
  margin-left: 20px;
}
.l-addrygl-2 {
  width: 100%;
  height: 650px;
  background: white;
  margin-top: 20px;
  padding-left: 20px;
}
.l-addrygl-2-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}
/* .l-addrygl-3-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}
.l-addrygl-3-2 {
  margin-left: 70px;
} */
.l-addp-gz-table {
  width: 99%;
}
.l-addrygl-3-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}
.l-addrygl-3-1-right {
  color: #409eff;
  font-size: 14px;
  margin-right: 40px;
  cursor: pointer;
}
.dang {
  height: 40px;
  margin-top: 40px;
  /* margin-top: 40px; */
}

/* .l-addrygl-3 {
  width: 100%;
  height: 182px;
  padding-left: 20px;
  background: white;
  margin-top: 20px;
} */
.l-addrygl-3 {
  width: 100%;
  height: 232px;
  padding-left: 20px;
  background: white;
  margin-top: 20px;
}
.l-chuan-table {
  width: 99%;
}
.l-addrygl-5 {
  /* margin-top: 10px; */
  font-size: 17px;
  color: #787878;
  width: 100%;
  height: 61px;
  background: white;
}
.l-tijiao {
  width: 170px;
  height: 40px;
  float: right;
}
.l-fen {
  width: 100%;
  height: 60px;
  background: white;
}
.f-fenye {
  float: right;
  margin-top: 15px;
  margin-right: 15px;
}
.f-fenye1 {
 position: absolute;
  bottom: 0;
  right: 0;
  margin-top: 15px;
  margin-right: 15px;
}
</style>